<template>
  <div>
    <FosoCard :showheader="false" :title="title">
      <FosoForm
        ref="formRef"
        :form-columns="formColumns"
        :form-columns-num="8"
        :form-data="formData"
        :form-expand="true"
        label-position="right"
      />
    </FosoCard>
    <FosoCard :showheader="false" class="cleartable !pt-0">
      <Grid>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <el-button class="ml-auto" type="primary">新增部门</el-button>
        </template>
      </Grid>
    </FosoCard>
  </div>
</template>

<script setup lang="tsx">
import type { RowType } from './type';

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 表单实例
const formRef = ref();
const title = ref('部门管理');
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  gender2: '',
  checkedCities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});
// const data = ref([
//   {
//     id: 1,
//     name: '系统管理',
//     type: '目录',
//   },
//   {
//     id: 2,
//     name: '用户管理',
//     type: '目录',
//   },
// ]);

// 表格配置项
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { type: 'checkbox', width: 80 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address', showOverflow: true },
  ],
  data: [
    {
      id: 10_001,
      role: 'Develop',
      sex: 'Man',
      age: 28,
      name: 'John',
      address: 'test abc',
    },
    {
      id: 10_002,
      role: 'Test',
      sex: 'Women',
      age: 22,
      name: 'John',
      address: 'Guangzhou',
    },
    {
      id: 10_003,
      role: 'PM',
      sex: 'Man',
      age: 32,
      name: 'John',
      address: 'Shanghai',
    },
    {
      id: 10_004,
      role: 'Designer',
      sex: 'Women',
      age: 23,
      name: 'John',
      address: 'test abc',
    },
    {
      id: 10_005,
      role: 'Develop',
      sex: 'Women',
      age: 30,
      name: 'John',
      address: 'Shanghai',
    },
  ],
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  keepSource: true,
  exportConfig: {},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons', // 指定自定义按钮插槽名称
    },
    custom: true,
    export: true,
    import: true,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    transform: true, // 自动将 parentId 转换为树形结构
    lazy: false, // 非懒加载
    indent: 20, // 缩进宽度
  },
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  border: true,
};

// 表格事件
const gridEvents: VxeGridListeners<RowType> = {};
// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });

// 表单配置项
const formColumns = computed(() => [
  {
    label: '部门名称', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入姓名666', // el-input 的属性
      clearable: true, // el-input 的属性
      'prefix-icon': 'Search',
      'suffix-icon': 'Search',
    },
  },
  {
    label: '部门负责人', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    show: false, // 控制是否显示
    span: 8, // 自行配置行宽
  },
]);

// 提交表单
// const submitForm = async () => {
//   await formRef.value.formRef.validate();
// };
</script>
